<template>
  <el-drawer v-model="visible" :size="900" :title="'详情'" direction="rtl" destroy-on-close class="noticeDetai_wrap" style="background: #f6f8f9">
		<div class="notice_body">
      <div class="noticeDetail_top">
        <div class="noticeTop_title">{{detail.title}}</div>
        <div class="noticeTop_info">
          <p class="highLight">【{{detail.levelName}}】</p>
          <p>
            <el-icon><el-icon-avatar class="user_icon"/></el-icon>
            {{detail.createdAtUserName}}
          </p>
          <p>
            <el-icon><el-icon-Clock class="user_icon"/></el-icon>
            {{this.$TOOL.dateFormat(detail.createdAt)}}</p>
        </div>
      </div>
      <div class="notice_content" v-if="detail.contents != ''">
        <div v-html="detail.contents"></div>
      </div>
    </div>
	</el-drawer>
</template>

<script>
export default {
  props: {
    size: { type: String, default: 900 }, //
  },
  data() {
    return {
      visible: false,
      showAll: true,
      detail: {}
    };
  },
  methods: {
    open(){
				this.visible = true;
				return this
			},
    checkShow() {
      this.showAll = !this.showAll
    },
    // 搜索、清空事件
    upsearch(type) {
      this.$emit('upsearch', type)
    },
    //表单注入数据
    setData(data){
      Object.assign(this.detail, data)
    }
  }
};
</script>

<style lang="scss" scoped>

  .noticeDetai_wrap {
    width: 100%;
    height: 100%;
    .notice_body {
      background: #fff;
      border: 1px solid #e4e7ed;
      width: 88%;
      min-height: 100%;
      margin: 0 auto;
      padding: 20px 30px;
      .noticeDetail_top {
        padding-bottom: 30px;
        .noticeTop_title {
          text-align: center;
          font-size: 28px;
          color: #111;
          padding: 30px 0 20px;
          font-weight: 700;
        }
        .noticeTop_info {
          display: flex;
          color: #666;
          justify-content: center;
          p {
            margin-right: 8px;
          }
          .user_icon {
            position: relative;
            top: 2px;
          }
        }
      }
      .notice_content {
        padding-bottom: 30px;
        width: 100%;
      }
    }
  }

</style>
<style lang="scss">
  .notice_content img{
    max-width: 100%;
  }
</style>
